<template>
  <div>
    <!--上传视频接口  -->
    <!-- <el-upload
      :action=" `${this.$basePath}?service=App.MaskMachines.UploadFile&api=193`"
      list-type="picture-card"
      :data="dataparms"
      :on-remove="handleRemove"
      :on-preview="handlePictureCardPreview"
      :limit="1"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-exceed="handleExceed"
      :on-error="imgUploadError"
      :file-list="productImgs"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
       :on-progress="uploadVideoProcess"
    </el-dialog>-->
    <div class="videodiv" v-if="videoForm.Video !='' && videoFlag == false">
      <i class="el-icon-circle-close videoclose" @click="handleRemoveVideo"></i>
      <video :src="videoForm.Video" class="videoclass" controls="controls">您的浏览器不支持视频播放</video>
    </div>
    <el-upload
      v-else
      class="avatar-uploader"
      :action="`${this.$basePath}?service=App.MaskMachines.UploadFile&api=193`"
      :show-file-list="false"
      :on-success="handleVideoSuccess"
      :before-upload="beforeUploadVideo"
      :data="dataparms"
    >
      <!-- <video
        v-if="videoForm.Video !='' && videoFlag == false"
        :src="videoForm.Video"
        class="videoclass"
        controls="controls"
      >您的浏览器不支持视频播放</video>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <P class="text">请保证视频格式正确，且不超过10M</P>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      videoFlag: false,
      videoForm: {
        Video: ""
      },
      videoUploadPercent: "",

      isMultiple: true,
      productImgs: [],
      dialogImageUrl: "",
      dialogVisible: false,
      dataparms: {},
      imgUrl: []
    };
  },
  mounted() {
    //传文件带的参数
    this.dataparms = {
      token: this.token,
      type: "video"
    };
  },
  methods: {
    handleRemoveVideo(fileList) {
      console.log("移除");
      this.imgUrl = [];
      
      console.log(this.imgUrl);
      this.videoForm.Video = "";
      this.videoFlag = false;
    },
    // handlePictureCardPreview(file) {
    //   console.log("预览图片");
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    // },

    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb"
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传视频大小不能超过10MB哦!");
        return false;
      }
    },

    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0);
    },
    handleVideoSuccess(res, file) {
      //获取上传图片地址
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      if (res.ret == 200) {
        //this.videoForm.videoUploadId = res.data.uploadId;
        this.videoForm.Video = res.data.path;
      } else {
        this.$message.error("视频上传失败，请重新上传！");
      }
    }
    // handleAvatarSuccess(res, file) {
    //   //图片上传成功
    //   console.log("上传成功");
    //   console.log(res);
    //   if (res.ret == 200) {
    //     this.imgUrl.push(res.data.path);
    //   }
    //   console.log("图片数组：", this.imgUrl);
    // },
    // handleExceed(files, fileList) {
    //   //图片上传超过数量限制
    //   this.$message.error("上传图片不能超过9张!");
    //   console.log(file, fileList);
    // },
    // imgUploadError(err, file, fileList) {
    //   //图片上传失败调用
    //   console.log(err);
    //   this.$message.error("上传图片失败!");
    // }
  }
};
</script>
<style lang="less" scoped>
.avatar-uploader {
  width: 200px;
  height: 150px;
  border: 1px dashed #fff;
  text-align: center;
  line-height: 150px;
  font-size: 16px;
  color: #fff;
  /deep/.avatar-uploader-icon {
    width: 100%;
    height: 100%;
    line-height: normal;
  }
  /deep/.el-upload {
    width: 100%;
    height: 100%;
  }
}
.videodiv {
  position: relative;
  width: 200px;
  height: 150px;
}
.videoclass {
  width: 200px;
  height: 150px;
}
.videoclose {
  color: #fff;
  position: absolute;
  right: -2px;
  top: -2px;
  cursor: pointer;
  z-index: 1000;
}
</style>
